<!-- pages/NewsTaBar/videoinfo/videoinfo.vue -->
<template>
  <view class="videoinfo-page">
    <!-- 顶部视频播放区（固定顶部，适配导航栏高度） -->
    <view class="video-container">
      <video 
        class="video-player"
        :src="videoSrc"
        controls
        autoplay
        style="width: 100%; height: 400rpx;"
      ></video>
    </view>

    <!-- 视频标题 -->
    <view class="video-title">大自然的魅力……雨后山林云雾缭绕，宛如人间仙境</view>

    <!-- 视频数据（播放量+点赞数） -->
    <view class="video-stats">
      <view class="stat-item">1.0万次播放</view>
      <view class="stat-item">
        <image class="icon" src="/static/images/icons/dz.png"></image> 3
      </view>
    </view>

    <!-- 作者信息 -->
    <view class="author-info">
      <image class="author-avatar" src="/static/images/other/icon_male.jpg"></image>
      <view class="author-meta">
        <view class="author-name">好吃的好玩的</view>
        <view class="publish-time">12-12</view>
      </view>
      <view class="follow-btn">+关注</view>
    </view>

    <!-- 推荐视频 -->
    <view class="recommend-title">为你推荐</view>
    <view class="recommend-list">
      <view class="recommend-item" @click="goToVideoDetail">
        <image class="recommend-cover" src="/static/images/news/t.png"></image>
        <view class="recommend-content">
          <view class="recommend-title">大兴安岭出现超大型野兽，体重一吨比轿车还大……</view>
          <view class="recommend-meta">
            <view class="recommend-author">动物大观察</view>
            <view class="recommend-play">5.3万次播放</view>
          </view>
        </view>
      </view>
      <view class="recommend-item" @click="goToVideoDetail">
        <image class="recommend-cover" src="/static/images/news/a.png"></image>
        <view class="recommend-content">
          <view class="recommend-title">曼联阿森纳27次客场不败，英超最强客场王诞生</view>
          <view class="recommend-meta">
            <view class="recommend-author">体育大事件</view>
            <view class="recommend-play">8.7万次播放</view>
          </view>
        </view>
      </view>
      <view class="recommend-item" @click="goToVideoDetail">
        <image class="recommend-cover" src="/static/images/news/b.png"></image>
        <view class="recommend-content">
          <view class="recommend-title">网红司机为救婴儿连闯3红灯，警察查实后取消处罚</view>
          <view class="recommend-meta">
            <view class="recommend-author">社会正能量</view>
            <view class="recommend-play">14.9万次播放</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 热门评论 -->
    <view class="comment-title">热门评论</view>
    <view class="comment-list">
      <view class="comment-item">
        <image class="comment-avatar" src="/static/images/icons/mmao.png"></image>
        <view class="comment-content">
          <view class="comment-header">
            <view class="comment-nickname">狐友879303</view>
            <view class="comment-meta">
              <view class="comment-time">1小时前</view>
              <view class="comment-location">广西桂林市</view>
            </view>
          </view>
          <view class="comment-text">保命要紧，何机再起。</view>
          <view class="comment-actions">
            <view class="comment-like">
              <image class="icon" src="/static/images/icons/dianzan.png"></image> 3
            </view>
            <view class="comment-reply">
              <image class="icon" src="/static/images/icons/xingxi.png"></image> 回复
            </view>
          </view>
        </view>
      </view>
      <view class="comment-item">
        <image class="comment-avatar" src="/static/images/icons/mmao.png"></image>
        <view class="comment-content">
          <view class="comment-header">
            <view class="comment-nickname">网友872503</view>
            <view class="comment-meta">
              <view class="comment-time">2小时前</view>
              <view class="comment-location">广西贵港市</view>
            </view>
          </view>
          <view class="comment-text">微笑生活，勇敢面对。</view>
          <view class="comment-actions">
            <view class="comment-like">
              <image class="icon" src="/static/images/icons/dianzan.png"></image> 7
            </view>
            <view class="comment-reply">
              <image class="icon" src="/static/images/icons/xingxi.png"></image> 回复
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部评论输入框 -->
    <view class="comment-input-bar">
      <input 
        type="text" 
        class="comment-input" 
        placeholder="我来说两句"
      />
      <view class="input-actions">
        <image class="icon" src="/static/images/icons/xingxi.png"></image>
        <image class="icon" src="/static/images/icons/wjx.png"></image>
        <image class="icon" src="/static/images/icons/lj.png"></image>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 视频播放地址（可通过路由参数动态获取）
      videoSrc: "http://picture.518-money.cn/18f875c85487a46140e71b6672b98c77c6f79a6e.mp4"
    }
  },
  onLoad(options) {
    // 接收从视频列表页传递的视频ID（可用于请求该视频的详情数据）
    console.log("视频ID：", options.id);
    // 实际项目中，可通过options.id请求接口，获取视频真实地址、标题、评论等数据
  },
  methods: {
    // 点击推荐视频跳转到对应详情页
    goToVideoDetail() {
      uni.navigateTo({
        url: `/pages/NewsTaBar/videoinfo/videoinfo?id=v005` // 实际应传递对应视频ID
      });
    }
  }
}
</script>

<style scoped>
.videoinfo-page {
  min-height: 100vh;
  background-color: #fff;
  padding-bottom: 80rpx; /* 抵消底部输入框的固定定位 */
}
/* 视频容器 */
.video-container {
  position: relative;
  width: 100%;
}
.video-player {
  width: 100%;
  height: 400rpx;
}
/* 视频标题 */
.video-title {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
  padding: 20rpx;
  line-height: 40rpx;
}
/* 视频数据 */
.video-stats {
  display: flex;
  justify-content: space-between;
  padding: 0 20rpx 20rpx;
  border-bottom: 1rpx solid #f5f5f5;
}
.stat-item {
  font-size: 22rpx;
  color: #999;
  display: flex;
  align-items: center;
  gap: 8rpx;
}
.icon {
  width: 30rpx;
  height: 30rpx;
}
/* 作者信息 */
.author-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
  border-bottom: 1rpx solid #f5f5f5;
}
.author-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
}
.author-meta {
  margin-left: 15rpx;
  flex: 1;
}
.author-name {
  font-size: 24rpx;
  color: #333;
  margin-bottom: 5rpx;
}
.publish-time {
  font-size: 20rpx;
  color: #999;
}
.follow-btn {
  width: 140rpx;
  height: 50rpx;
  line-height: 50rpx;
  text-align: center;
  background-color: #DD524D;
  color: #fff;
  border-radius: 50rpx;
  font-size: 22rpx;
}
/* 推荐视频 */
.recommend-title {
  font-size: 26rpx;
  color: #333;
  font-weight: bold;
  padding: 20rpx;
}
.recommend-list {
  padding: 0 20rpx 20rpx;
}
.recommend-item {
  display: flex;
  margin-bottom: 20rpx;
  background-color: #f9f9f9;
  border-radius: 10rpx;
  overflow: hidden;
}
.recommend-cover {
  width: 200rpx;
  height: 200rpx;
  flex-shrink: 0;
}
.recommend-content {
  flex: 1;
  padding: 15rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.recommend-title {
  font-size: 22rpx;
  color: #333;
  margin-bottom: 10rpx;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.recommend-meta {
  display: flex;
  justify-content: space-between;
  font-size: 20rpx;
  color: #999;
}
/* 评论区 */
.comment-title {
  font-size: 26rpx;
  color: #333;
  font-weight: bold;
  padding: 20rpx;
  border-top: 10rpx solid #f5f5f5;
}
.comment-list {
  padding: 0 20rpx 20rpx;
}
.comment-item {
  display: flex;
  margin-bottom: 30rpx;
}
.comment-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  flex-shrink: 0;
}
.comment-content {
  flex: 1;
  margin-left: 15rpx;
}
.comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
}
.comment-nickname {
  font-size: 22rpx;
  color: #007AFF;
  font-weight: 500;
}
.comment-meta {
  font-size: 20rpx;
  color: #999;
  display: flex;
  gap: 15rpx;
}
.comment-text {
  font-size: 22rpx;
  color: #333;
  margin-bottom: 10rpx;
}
.comment-actions {
  display: flex;
  gap: 30rpx;
  font-size: 20rpx;
  color: #999;
}
.comment-like, .comment-reply {
  display: flex;
  align-items: center;
  gap: 8rpx;
}
/* 底部输入框 */
.comment-input-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  border-top: 1rpx solid #f5f5f5;
}
.comment-input {
  flex: 1;
  height: 50rpx;
  background-color: #f8f8f8;
  border-radius: 50rpx;
  padding: 0 20rpx;
  font-size: 22rpx;
}
.input-actions {
  display: flex;
  gap: 30rpx;
  margin-left: 20rpx;
}
</style>